<template>
  <div class="menu-wrapper">
    <template v-for="(route, index) in routes">
      <template v-if="route.children">
        <!-- 拥有二级菜单 -->
        <el-submenu
          :index="pre ? `${pre}/${route.path}` : route.path"
          :key="index"
          v-if="route.name !== 'Dashboard'"
        >
          <template slot="title">
            <svg-icon :icon-class="(route.meta && route.meta.icon) || ''" />
            <span slot="title">{{ (route.meta && route.meta.title) || sidebar.defaultTitle }}</span>
            {{ route.hidden }}
          </template>

          <sidebar-item
            :pre="route.path"
            :routes="route.children"
            :key="route.path"
            class="nest-menu"
          />
        </el-submenu>
        <el-submenu
          class="dashboard-el-submenu"
          :index="pre ? `${pre}/${route.path}` : route.path"
          :key="'dashboard-' + index"
          v-else
        >
          <template slot="title">
            <svg-icon :icon-class="(route.meta && route.meta.icon) || ''" />
            <span slot="title">{{ (route.meta && route.meta.title) || sidebar.defaultTitle }}</span>
            {{ route.hidden }}
          </template>

          <sidebar-item
            :pre="route.path"
            :routes="route.children"
            :key="route.path"
            class="nest-menu"
          />
        </el-submenu>
      </template>

      <template v-else>
        <!-- 直接link url地址情况 -->
        <a :href="route.link" :key="route.link" v-if="route.link">
          <el-menu-item :key="route.path">
            <svg-icon :icon-class="(route.meta && route.meta.icon) || sidebar.defaultIcon" />
            <span>{{ (route.meta && route.meta.title) || sidebar.defaultTitle }}</span>
          </el-menu-item>
        </a>
        <!-- 普通路由情况 -->
        <template v-else>
          <el-menu-item
            :index="pre ? `${pre}/${route.path}` : route.path"
            :key="route.path"
            v-if="!route.hidden"
          >
            <svg-icon :icon-class="(route.meta && route.meta.icon) || sidebar.defaultIcon" />
            <span>{{ (route.meta && route.meta.title) || sidebar.defaultTitle }}</span>
          </el-menu-item></template
        >
      </template>
    </template>
  </div>
</template>

<script>
export default {
  name: 'SidebarItem',
  inject: ['sidebar'],
  props: {
    pre: {
      //element不会自动追加完整路由地址，手动补全
      type: String,
      default: ''
    },
    routes: {
      type: Array,
      default: () => []
    }
  },

  computed: {}
}
</script>

<style lang="less" scoped>
.menu-wrapper {
  background-color: #ebf0fa;
}
/deep/.el-icon-arrow-down:before {
  display: none;
}
/deep/ .el-submenu {
  .el-menu-item {
    padding: 0 !important;
    padding-left: 20px !important;
    margin: 0 20px;
    min-width: 120px !important;
    border-radius: 10px;
    height: 46px;
    line-height: 46px;
    // text-align: center;
    margin-bottom: 5px;
    background-color: #fff;
    color: #666;
    display: flex;
    align-items: center;
    // span {
    //   margin-left: 10px;
    // }
    &.is-active {
      background-color: #1677ff;
      color: #fff;
    }
  }
  & > .el-submenu__title {
    .svg-icon {
      width: 0;
      margin: 0 !important;
    }
    span {
      color: #7180a7;
      font-size: 12px;
    }
    height: 40px;
    line-height: 40px;
    background: none;
  }
  &.dashboard-el-submenu > .el-submenu__title {
    display: none !important;
  }
}
</style>
